<template>
	<div class="booksgit">
		<div class="tablist">
			<div class="swiper-container presslist" style="border-bottom: #FFFFFF 3px solid;">
				<ul class="tab swiper-wrapper">
					<li class="swiper-slide the" @click="getAll()">全部</li>
					<li class="swiper-slide the" v-for="(item,i) in pressList" :key="i" @click="getit(item)">{{item}}</li>
				</ul>
			</div>
			<div class="swiper-container presslist2" style="border-bottom: #FFFFFF 3px solid;">
				<ul class="tab swiper-wrapper">
					<li class="swiper-slide the" @click="getAll()">全部</li>
					<li class="swiper-slide the" v-for="(item,i) in dateList" :key="i">{{item}}</li>
				</ul>
			</div>

			<div class="show">
				<h4>猜您想找</h4>
				{{list}}
			</div>
			<div class="order">
				<MobileHomeList proptitle="新书上市" :proplist='newslist'></MobileHomeList>
			</div>
		</div>
	</div>
</template>

<script>
	import MobileHomeList from '@/components/mobile/MobileHomeList.vue'
	//导入swiper组件内容[周期函数内 如果是请求的数据进行轮播 建议第三阶段执行]
	import Swiper from 'swiper';
	import MobileHome from "@/view/mobile/MobileHome.vue"
	export default {
		name: 'MoblieBooksGit',
		components: {
			MobileHomeList,
			MobileHome
		},
		data() {
			return {
				newslist: [],
				getList: [],
				pressList: ["机械出版社", "电子出版社", "二十一世纪出版社",
					"中国人口出版社", "人民出版社", "清华大学出版社", "野生出版社", "家养出版社"
				],
				publicationDate: [],
				dateList: ['2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022',
					'2023'
				],
				booklist:[],
				list:[]
			}
		},
		//组件模板渲染完成后
		mounted() {
			this.findNew();
			let maxYear = new Date().getFullYear() + 1;
			for (let i = 2010; i <= maxYear; i++) {
				this.publicationDate.push(i)
			}
			new Swiper('.presslist', {
				spaceBrtween: 20,
				slidesPerView: 'auto',
			})
			new Swiper('.presslist2', {
				spaceBrtween: 20,
				slidesPerView: 'auto',
			})
			new Swiper('.presslist3', {
				spaceBrtween: 20,
				slidesPerView: 'auto',
			})
			this.findAllbook();
		},
		methods: {
			findAllbook() {
				console.log('wryyynewww');
				this.$get("/api/adm/ord/findPageOrders2u/1/10").then((resp) => {
					console.log(resp.data);
					console.log(resp.data.data);
					this.booklist=resp.data.data;
				})
			},  
			findNew() {
				console.log('wryyynewww');
				this.$get("/api/public/findHot/1/4").then((resp) => {
					console.log(resp.data);
					console.log(resp.data.data);
					this.newslist = resp.data.data;
				})
			},
			getAll() {
				this.pressList.forEach((item, i) => {
					this.getList.push(this.pressList[i].id);
					console.log(item);
					console.log(this.pressList[i].id);
				})

				console.log(this.getList);
			},
			getit(it) {
				console.log(it);
				this.pressList.forEach((item, i) => {
					if (item==it) {
						this.list.push(item)
					} else{
						
					}
				})
			}
		}
	}
</script>

<style scoped>
	.booksgit {
		width: 100%;
	}

	.booksgit .tablist {
		width: 95%;
		margin: 0 auto 1rem;
		border-bottom: 1px dotted white;
		border-top: 1px dotted white;
	}

	.booksgit .tablist .tab {
		height: 2.5rem;
		line-height: 2.5rem;

	}

	.booksgit .tablist .tab li {
		/* 不设置任何宽度 包括0 */
		width: unset;
		margin-right: 0.8rem;
		margin-left: 0.3rem;
		font-size: 0.875rem;
		list-style: none;
		color: #22b8b6;
	}

	.swiper-slide {
		width: auto;
	}

	.the ::after {
		color: #0874FE;
		border: red 3px solid;
	}
	.show{
		margin-top: 1rem;
		margin-bottom: 1rem;
		margin-left: 0.5rem;
		color: #a67b57;
	}
</style>